<template>
  <div class="mian_contariner">
    <el-row>
      <el-col :span="16">
        <div class="grid-content rigth01 bg-purple">
          <div class="top01" >
            <a :href="pic1[0]" ><img :src="pic1[1]"  alt=""></a>
          </div>
          <div class="bum01">
            <el-row >
              <el-col :span="12">
                <div class="grid-content hei01 rigth01 bg-purple">
                  <a :href="pic2[0]"> <img class="pic01" :src="pic2[1]" alt=""></a>
                </div></el-col>
              <el-col :span="12"><div class="grid-content hei01 bg-purple left01">
                <a :href="pic3[0]"><img class="pic02" :src="pic3[1]" alt=""></a>
              </div></el-col>
            </el-row>
          </div>
        </div></el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light left01">
           <weather></weather>
          <div class="add">
          <news></news>
          </div>
        </div></el-col>
    </el-row>
  </div>
</template>

<script>
  import weather from './weather'
  import news from './new'
    export default {
        name: "one",
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          picsy:[],
          pic1:[],
          pic2:[],
          pic3:[]
        }
      },mounted(){
          this.over();
      },
      methods:{
          over:function () {
            var that = this;
            axios.get('https://bird.ioliu.cn/v2/?url=http://101.37.161.89/wordpress/?post_type=jk_coursepic&p=21&json=1').then(re=>{
              for(var value in re.data.post.custom_fields){
                re.data.post.custom_fields[value] = re.data.post.custom_fields[value][0].split('=');
                var ss = re.data.post.custom_fields[value]
                that.picsy.push(ss);
              }
              that.pic1 = that.picsy[0];
              that.pic2 = that.picsy[1];
              that.pic3 = that.picsy[2];
            })
          }
      },
      computed:{

      },
      components:{
        weather,news
      }

    }
</script>

<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  img {
    width: 100%;
    height: 100%;
  }
  :last-child {
    margin-bottom: 0;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .mian_contariner {
    max-width: 1572px;
    margin: 0 auto;
    margin-top: 30px;
  }
  .hei01{
    height: 458px;
  }
  .top01{
    margin-bottom: 30px;
    height: 402px;
  }
  .left01{
    padding-left: 15px;
  }
  .rigth01{
    padding-right: 15px;
  }

  .op_weather4_twoicon_shishi_bottom>p{
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .mian_contariner{
    margin-bottom: 30px;
  }
  .add{
    margin-top: 30px;
  }
</style>
